<template>
	<view class="container">
		<uni-nav-bar :border="false" backgroundColor="transparent" statusBar color="white" title="我的勋章" fixed>
			<template v-slot:left>
				<!-- 在这里放置左侧的自定义内容，比如返回按钮或其他内容 -->
				<van-icon name="arrow-left" color="#ffffff" size="34rpx" @click="sweep" />
			</template>
		</uni-nav-bar>
		<img src="../../static/images/medalbg.png" alt="" class="bg" />
		<view class="total">
			<text> <text class="titleIc_l">「</text>共获得</text>
			<text class="totalNum">{{medalList.length}}</text>
			<text>枚勋章 <text class="titleIc_r">」</text></text>

		</view>
		<view class=" medalcontent">
					<view class="medals">
						<view class="medalItem" v-for="(item,index) in medalList" :key="item.id"
							@click="()=>medalDetail(item)">
							<view>
								<img :src="item.medalUrl" alt="" class="medalimg" />
							</view>
							<view class="medalName">
								{{item.medalName}}
							</view>
						</view>
					</view>
		</view>

		<!-- 勋章详情弹框 -->
		<van-popup :show="isShow" position="bottom" safe-area-inset-bottom @click-overlay="closeBox">
			<view class="msgContent">
				<!-- 图片 -->
				<image :src="medalDetailmsg.medalUrl" class="msgimg" />
				<view class="msgname">
					{{medalDetailmsg.medalName}}
				</view>
				<view class="msgtext">
					{{medalDetailmsg.content}}
				</view>
				<view class="msgTime">
					{{medalDetailmsg.createTime}}获得
				</view>
				<view class="msgNum">
					{{medalDetailmsg.num}}位用户拥有该勋章
				</view>
			</view>
		</van-popup>
	</view>

</template>

<script>
	import {
		getMedalList
	} from '@/common/api/medal'
	export default {
		data() {
			return {
				medalList: [],
				medalDetailmsg: {

				},
				isShow: false,
				activeName: '1',

			}
		},
		onLoad() {



			this.getmineMedalList()
		},
		methods: {
			// 查看勋章详情
			medalDetail(item) {
				uni.navigateTo({
					url: `/pages_mine/mine/medalDetail?content=${item.content}&createTime=${item.createTime}&medalName=${item.medalName}&medalUrl=${item.medalUrl}&num=${item.num}`
				})
				// this.medalDetailmsg = item;
				// console.log(item, ".v.v.v");
				// this.isShow = true
			},
			// 关闭弹窗
			closeBox() {
				this.isShow = false
			},
			// 获得勋章
			getmineMedalList() {
				getMedalList().then(res => {
					this.medalList = res.data;
					console.log(this.medalList);
				})
			},
			// 返回上一页
			sweep() {
				uni.navigateBack({
					delta: 1,
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-nav-bar-text {
		font-size: 36rpx !important;
	}

	.container {
		width: 750rpx;
		min-height: 100vh;
		// background: #fafafa;
		position: relative;
	}

	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -10;
	}

	.medalcontent {
		width: 100%;
		// min-height:1056rpx;
		height: 1056rpx;
		padding: 38rpx 32rpx;
		box-sizing: border-box;
	}

	.medals {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-content: flex-start;
		flex-wrap: wrap;
		padding: 64rpx 40rpx 64rpx 44rpx;
		box-sizing: border-box;
		// height: 1056rpx;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 32rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.63);
		backdrop-filter: blur(15px);
	}

	.medalItem {
		width: 158rpx;
		margin-right: 60rpx;
		margin-bottom: 64rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		// margin-left: 10rpx;

	}

	.medals .medalItem:nth-of-type(3n) {
		margin-right: 0;
	}

	.medalimg {
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
		margin-bottom: 16rpx;
	}

	.medalName {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #F85415;
	}

	.msgContent {
		width: 100%;
		padding: 100rpx;
		box-sizing: border-box;
		text-align: center;
		color: #bbbbbb;
	}

	.msgname {
		font-size: 40rpx;

	}

	.msgimg {
		width: 250rpx;
		height: 250rpx;
		margin: 40rpx auto;
	}

	.msgtext {
		width: 100%;
		text-align: left;
		margin: 60rpx 0rpx;
		color: #bbbbbb;
	}

	.msgTime {
		margin-top: 100rpx;
		margin-bottom: 40rpx;
	}

	.sweep {
		margin-left: 20rpx;
		width: 48rpx;
		height: 48rpx;
	}

	.total {
		text-align: center;
		font-size: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		margin-top: 94rpx;
	}

	.totalNum {
		font-size: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #2754F3;
		margin: 0 15rpx;
	}

	.titleIc_l {
		font-size: 26rpx;
		vertical-align: text-top;
	}

	.titleIc_r {
		font-size: 26rpx;
		vertical-align: text-bottom;
	}

	// ::v-deep .uni-collapse-item__title-arrow text {
	// 	display: none;

	// }

	// ::v-deep .uni-collapse-item__title-arrow::after {
	// 	content: "";
	// 	width: 30rpx;
	// 	height: 30rpx;
	// 	background-image: url(../../static/images/study/expand.png);
	// }
</style>